<template>
  <header>
    <aside>
       <h2>在线商城后台管理系统</h2>
       <div>
         <img src="@\assets\user.png" alt="">      
         <span> 登录者账号：</span>
         <!-- 下拉菜单 -->
          <el-dropdown @command="handleCommand">
            <el-icon class="ico">
              <arrow-down/>
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu >
                <el-dropdown-item command="changepwd">修改密码</el-dropdown-item>
                <hr>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      
    </aside>
   
  </header>
</template>

<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

 const router =useRouter();


// 处理下拉菜单命令
const handleCommand = (command) => {
  if (command === 'logout') {
    Logout();
  } else if (command === 'changepwd') {
    // 处理修改密码逻辑
  }
};


// 退出登录按钮
const Logout = ()=>{
  sessionStorage.removeItem('user');
  router.push('/admin');
}
</script>

<style scoped>
header{
  width: 100%;
  height: 18vh;
  background-color: #2a2a33;
  color: white;
}
aside{
  display: flex;
  justify-content: space-between;
  line-height: 18vh;
  margin: 0 40px;
}
aside h2{
  font-size: 30px;
  color: rgb(228, 214, 18);
}
aside div{
  display: flex;
  align-items: center;
}
aside div img{
  width: 60px;
  height: 60px;
}
aside div span{
  color: white;
}
/* 下拉菜单 */
.el-icon *{
  color: white;
}
</style>